<!DOCTYPE html>
<html>
	<head>
		<title>Div模拟的对话框</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			body {
			      margin: 0px;
			      font-family: 微软雅黑;
			    }
			    table {
			      margin:0 auto;
			      border:1px solid #e0e0e0;
			    }
			    a {
			      text-decoration:none;
			      color:darkgray;
			    }
			      a:visited {
			        text-decoration:none;
			        color:darkgray;
			      }
			      a:hover {
			        text-decoration:none;
			        color:red;
			      }
			
			    #divAll {
			      position: absolute;
			      left: 0px;
			      top: 0px;
			      width: 100%;
			      height: 100%;
			      background-color: #e0e0e0;
			      opacity:0.7;
			      z-index: 10;
			    }
			
			    #divDlg {
			      position:absolute;
			      border: 1px solid #3377ff;
			      background-color:white;
			      z-index: 20;
			      left:0px;
			      top:0px;
			    }
		</style>
	</head>

	<body>
		<div id="divAll" style="visibility: hidden"></div>
		<div id="divDlg" style="visibility: hidden">
			<table>
				<tr>
					<td colspan="3" align="center">
						<img src="img/head.gif" />
					</td>
				</tr>
				<tr>
					<td align="right">用户名</td>
					<td colspan="2">
						<input type="text" id="txtName" style="width: 80%" />
					</td>
				</tr>
				<tr>
					<td align="right">密码</td>
					<td colspan="2">
						<input type="password" id="txtPwd" style="width: 80%" />
					</td>
				</tr>
				<tr>
					<td align="right">验证码</td>
					<td>
						<input type="text" />
					</td>
					<td>
						<img src="img/validatecode.jpg" />
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<input type="image" src="img/loginbutton.gif" onclick="login()" />
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<a href="#">重置密码</a>
						<a href="#">注册</a>
					</td>
				</tr>
			</table>
		</div>
		<div style="text-align:center;">
			<input onclick="openDlg()" type="button" value="登录系统" />
			<br />
			<span id="spnInfo"></span>
		</div>
		
		<script type="text/javascript">
			function closeDlg() {
				divDlg.style.visibility = "hidden";
				divAll.style.visibility = "hidden";
			}

			function openDlg() {
				divDlg.style.visibility = "visible";
				divAll.style.visibility = "visible";
				txtName.focus();
				var left = (window.innerWidth - divDlg.clientWidth) / 2;
				var top = (window.innerHeight - divDlg.clientHeight) / 2;
				divDlg.style.left = left + "px";
				divDlg.style.top = top + "px";
			}

			function login() {
				closeDlg();
				if (txtName.value == "1" && txtPwd.value == "1") {
					spnInfo.innerHTML = "登录成功!";
				} else {
					spnInfo.innerHTML = "登录失败!";
				}
			}
		</script>
	</body>

</html>